import '../../public.dart';

const Color defaultColor = Colors.grey;
const Color defaultActivedColor = Colors.red;

class BottomBar extends StatelessWidget {
  final List<RootTabPage> list;
  final int currentIndex;
  final Function onSelect;
  const BottomBar(this.list,
      {Key? key, required this.onSelect, required this.currentIndex})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      height: ScreenUtil.setHeight(55) + ScreenUtil.bottomSafeHeight,
      color: Colors.white,
      padding: EdgeInsets.only(top: 5, bottom: 5 + ScreenUtil.bottomSafeHeight),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: List.generate(
          list.length,
          (index) => bootomItem(
            title: list[index].name,
            icon: list[index].icon,
            activedIcon: list[index].activedIcon,
            color: list[index].color,
            activedColor: list[index].activedColor,
            width: 24,
            height: 24,
            itemIndex: index,
          ),
        ),
      ),
    );
  }

  Widget bootomItem({
    String? title,
    required Widget icon,
    required Widget activedIcon,
    required Color color,
    required Color activedColor,
    required double width,
    required double height,
    required int itemIndex,
  }) {
    bool isActived = currentIndex == itemIndex;
    return GestureDetector(
      onTap: () {
        onSelect(itemIndex);
      },
      child: Container(
        color: Colors.white,
        padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          mainAxisSize: MainAxisSize.max,
          children: <Widget>[
            Container(
              child: Center(
                child: isActived ? activedIcon : icon,
              ),
              width: 24,
              height: 24,
              color: Colors.white,
            ),
            title != null
                ? Text(
                    title,
                    style: TextStyle(
                        color: isActived ? activedColor : color, fontSize: 10),
                  )
                : const SizedBox()
          ],
        ),
      ),
    );
  }
}

class RootTabPage {
  Widget page;
  String? name;
  Widget activedIcon;
  Widget icon;
  Color color;
  Color activedColor;
  RootTabPage(
      {required this.page,
      this.name,
      Widget? activedIcon,
      required this.icon,
      this.color = Colors.grey,
      this.activedColor = Colors.red})
      : activedIcon = activedIcon ?? icon;
}
